<template>
  <div :class="['loading-state', `loading-state--${type}`, `loading-state--${size}`]">
    <!-- 骨架屏加载 -->
    <div v-if="type === 'skeleton'" class="skeleton-container">
      <div v-for="i in skeletonCount" :key="i" class="skeleton-item">
        <div v-if="showAvatar" class="skeleton-avatar"></div>
        <div class="skeleton-content">
          <div class="skeleton-line skeleton-line--title"></div>
          <div class="skeleton-line skeleton-line--subtitle"></div>
          <div v-if="showExtra" class="skeleton-line skeleton-line--extra"></div>
        </div>
      </div>
    </div>

    <!-- 网格骨架屏 -->
    <div v-else-if="type === 'grid'" class="skeleton-grid">
      <div
        v-for="i in gridCount"
        :key="i"
        :class="['skeleton-grid-item', { 'skeleton-grid-item--square': gridSquare }]"
      >
        <div class="skeleton-thumbnail"></div>
        <div class="skeleton-text">
          <div class="skeleton-line"></div>
          <div class="skeleton-line skeleton-line--short"></div>
        </div>
      </div>
    </div>

    <!-- 加载动画 -->
    <div v-else-if="type === 'spinner'" class="spinner-container">
      <div class="spinner-wrapper">
        <!-- 自定义加载动画 -->
        <div v-if="spinnerType === 'custom'" class="custom-spinner">
          <div class="spinner-circle"></div>
          <div class="spinner-circle"></div>
          <div class="spinner-circle"></div>
        </div>

        <!-- OpenTiny 加载组件 -->
        <tiny-loading v-else :size="loadingSize" :text="loadingText" />
      </div>

      <div v-if="title" class="loading-title">{{ title }}</div>
      <div v-if="description" class="loading-description">{{ description }}</div>
    </div>

    <!-- 进度条加载 -->
    <div v-else-if="type === 'progress'" class="progress-container">
      <div class="progress-content">
        <div v-if="title" class="progress-title">{{ title }}</div>
        <div class="progress-bar">
          <div
            :style="{ width: progress + '%' }"
            class="progress-fill"
          ></div>
        </div>
        <div class="progress-info">
          <span class="progress-text">{{ progressText || `${progress}%` }}</span>
          <span v-if="description" class="progress-description">{{ description }}</span>
        </div>
      </div>
    </div>

    <!-- 点加载 -->
    <div v-else-if="type === 'dots'" class="dots-container">
      <div class="dots-wrapper">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
      </div>
      <div v-if="title" class="loading-title">{{ title }}</div>
    </div>

    <!-- 脉冲加载 -->
    <div v-else class="pulse-container">
      <div class="pulse-wrapper">
        <div class="pulse-ring"></div>
        <div class="pulse-ring"></div>
        <div class="pulse-ring"></div>
      </div>
      <div v-if="title" class="loading-title">{{ title }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// Props
interface Props {
  type?: 'skeleton' | 'grid' | 'spinner' | 'progress' | 'dots' | 'pulse'
  size?: 'small' | 'medium' | 'large'
  title?: string
  description?: string
  skeletonCount?: number
  gridCount?: number
  gridSquare?: boolean
  showAvatar?: boolean
  showExtra?: boolean
  spinnerType?: 'default' | 'custom'
  loadingText?: string
  progress?: number
  progressText?: string
}

const props = withDefaults(defineProps<Props>(), {
  type: 'spinner',
  size: 'medium',
  skeletonCount: 3,
  gridCount: 6,
  gridSquare: true,
  showAvatar: false,
  showExtra: false,
  spinnerType: 'default',
  progress: 0
})

// 计算属性
const loadingSize = computed(() => {
  const sizeMap = {
    small: 'mini',
    medium: 'small',
    large: 'medium'
  }
  return sizeMap[props.size]
})
</script>

<script lang="ts">
import { computed } from 'vue'
export default {
  name: 'LoadingState'
}
</script>

<style lang="scss" scoped>
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  &--small {
    padding: $spacing-4;
  }

  &--medium {
    padding: $spacing-8;
  }

  &--large {
    padding: $spacing-12;
  }

  // 骨架屏样式
  .skeleton-container {
    width: 100%;

    .skeleton-item {
      display: flex;
      gap: $spacing-3;
      margin-bottom: $spacing-4;

      .skeleton-avatar {
        width: 48px;
        height: 48px;
        border-radius: $radius-full;
        background: $gray-200;
        flex-shrink: 0;
        animation: skeleton-pulse 1.5s ease-in-out infinite;
      }

      .skeleton-content {
        flex: 1;

        .skeleton-line {
          height: 16px;
          background: $gray-200;
          border-radius: $radius-sm;
          margin-bottom: $spacing-2;
          animation: skeleton-pulse 1.5s ease-in-out infinite;

          &--title {
            width: 60%;
            height: 20px;
          }

          &--subtitle {
            width: 80%;
          }

          &--extra {
            width: 40%;
            height: 14px;
          }
        }
      }
    }
  }

  // 网格骨架屏样式
  .skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: $spacing-4;
    width: 100%;

    .skeleton-grid-item {
      background: white;
      border-radius: $radius-lg;
      overflow: hidden;
      border: 1px solid $gray-200;

      &--square .skeleton-thumbnail {
        aspect-ratio: 1;
      }

      .skeleton-thumbnail {
        width: 100%;
        height: 150px;
        background: $gray-200;
        animation: skeleton-pulse 1.5s ease-in-out infinite;
      }

      .skeleton-text {
        padding: $spacing-3;

        .skeleton-line {
          height: 16px;
          background: $gray-200;
          border-radius: $radius-sm;
          margin-bottom: $spacing-2;
          animation: skeleton-pulse 1.5s ease-in-out infinite;

          &--short {
            width: 60%;
          }
        }
      }
    }
  }

  // 加载动画样式
  .spinner-container {
    text-align: center;

    .spinner-wrapper {
      margin-bottom: $spacing-4;

      .custom-spinner {
        display: flex;
        gap: $spacing-1;
        justify-content: center;

        .spinner-circle {
          width: 12px;
          height: 12px;
          background: $primary-500;
          border-radius: $radius-full;
          animation: spinner-bounce 1.4s ease-in-out infinite both;

          &:nth-child(1) {
            animation-delay: -0.32s;
          }

          &:nth-child(2) {
            animation-delay: -0.16s;
          }
        }
      }
    }

    .loading-title {
      font-size: $text-lg;
      font-weight: $font-semibold;
      color: $gray-700;
      margin-bottom: $spacing-2;
    }

    .loading-description {
      font-size: $text-sm;
      color: $gray-500;
    }
  }

  // 进度条样式
  .progress-container {
    width: 100%;
    max-width: 400px;

    .progress-content {
      .progress-title {
        font-size: $text-base;
        font-weight: $font-semibold;
        color: $gray-700;
        margin-bottom: $spacing-3;
        text-align: center;
      }

      .progress-bar {
        width: 100%;
        height: 8px;
        background: $gray-200;
        border-radius: $radius-full;
        overflow: hidden;
        margin-bottom: $spacing-2;

        .progress-fill {
          height: 100%;
          background: $gradient-primary;
          border-radius: $radius-full;
          transition: width $duration-normal ease;
          position: relative;

          &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-image: linear-gradient(
              -45deg,
              rgba(255, 255, 255, 0.2) 25%,
              transparent 25%,
              transparent 50%,
              rgba(255, 255, 255, 0.2) 50%,
              rgba(255, 255, 255, 0.2) 75%,
              transparent 75%,
              transparent
            );
            background-size: 30px 30px;
            animation: progress-stripes 1s linear infinite;
          }
        }
      }

      .progress-info {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .progress-text {
          font-size: $text-sm;
          font-weight: $font-medium;
          color: $gray-600;
        }

        .progress-description {
          font-size: $text-sm;
          color: $gray-500;
        }
      }
    }
  }

  // 点加载样式
  .dots-container {
    text-align: center;

    .dots-wrapper {
      display: flex;
      gap: $spacing-2;
      justify-content: center;
      margin-bottom: $spacing-4;

      .dot {
        width: 12px;
        height: 12px;
        background: $primary-500;
        border-radius: $radius-full;
        animation: dots-scale 1.4s ease-in-out infinite both;

        &:nth-child(1) {
          animation-delay: -0.32s;
        }

        &:nth-child(2) {
          animation-delay: -0.16s;
        }
      }
    }

    .loading-title {
      font-size: $text-base;
      color: $gray-600;
    }
  }

  // 脉冲加载样式
  .pulse-container {
    text-align: center;

    .pulse-wrapper {
      display: inline-block;
      position: relative;
      width: 80px;
      height: 80px;
      margin-bottom: $spacing-4;

      .pulse-ring {
        display: inline-block;
        position: absolute;
        border: 4px solid $primary-500;
        opacity: 1;
        border-radius: 50%;
        animation: pulse-ring 1.2s cubic-bezier(0, 0.2, 0.8, 1) infinite;

        &:nth-child(2) {
          animation-delay: -0.5s;
        }

        &:nth-child(3) {
          animation-delay: -1s;
        }
      }
    }

    .loading-title {
      font-size: $text-base;
      color: $gray-600;
    }
  }
}

// 动画定义
@keyframes skeleton-pulse {
  0%, 100% {
    background-color: $gray-200;
  }
  50% {
    background-color: $gray-300;
  }
}

@keyframes spinner-bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

@keyframes progress-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@keyframes dots-scale {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1.2);
    opacity: 1;
  }
}

@keyframes pulse-ring {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}

// 暗色主题
[data-theme="dark"] {
  .loading-state {
    .skeleton-container,
    .skeleton-grid {
      .skeleton-avatar,
      .skeleton-line,
      .skeleton-thumbnail {
        background: $dark-200;
      }
    }

    .skeleton-grid-item {
      background: $dark-100;
      border-color: $dark-200;
    }

    .spinner-container {
      .loading-title {
        color: $dark-800;
      }

      .loading-description {
        color: $dark-600;
      }
    }

    .progress-container {
      .progress-title {
        color: $dark-800;
      }

      .progress-bar {
        background: $dark-200;
      }

      .progress-info {
        .progress-text {
          color: $dark-700;
        }

        .progress-description {
          color: $dark-600;
        }
      }
    }

    .dots-container,
    .pulse-container {
      .loading-title {
        color: $dark-700;
      }
    }
  }
}
</style>
